<template>
  <!-- 没有播放音乐时 -->
  <div class="zeroHeader" v-if="$store.state.curindex==-1">
    <!-- 头部标题 -->
    <div class="header" :style="{'background':zerotitle!=''?'#d43c33':'transparent'}">
      <!-- 判断是否第一级路由决定是否显示显示侧边栏按钮 -->
      <!-- 侧边栏按钮 -->
      <div class="left" v-if="$store.state.usesideBar==true">
        <!-- <i class="iconfont icon-zhankaicebianlan" @click="controlSB"></i> -->
      </div>
      <!-- 返回按钮 -->
      <div class="left" v-else>
        <!-- <i class="iconfont icon-fanhui"></i> -->
        <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      </div>
      <div class="mid">{{zerotitle}}</div>
      <!-- 搜索按钮 -->
      <div class="right">
        <i class="iconfont icon-sousuo" v-if="$store.state.usesideBar==true" @click="gosearch"></i>
        <i class="iconfont icon-shouye" v-else @click="gohome"></i>
      </div>
    </div>
  </div>

  <!-- 播放音乐时 -->
  <div class="zeroHeader" v-else>
    <!-- 头部标题 -->

    <div class="header" v-if="$store.state.songinfoDetails">
      <!-- 判断是否第一级路由决定是否显示显示侧边栏按钮 -->
      <!-- 侧边栏按钮 -->
      <div
        class="head_bg"
        :style="{'background':zerotitle!=''?$store.state.songinfoDetails.al.picUrl?`url(${$store.state.songinfoDetails.al.picUrl}?param=50y50)`:'red':'transparent'}"
      ></div>
      <div class="left" v-if="$store.state.usesideBar==true">
        <!-- <i class="iconfont icon-zhankaicebianlan" @click="controlSB"></i> -->
      </div>
      <!-- 返回按钮 -->
      <div class="left" v-else>
        <!-- <i class="iconfont icon-fanhui"></i> -->
        <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      </div>
      <div class="mid">{{zerotitle}}</div>
      <!-- 搜索按钮 -->
      <div class="right">
        <i class="iconfont icon-sousuo" v-if="$store.state.usesideBar==true" @click="gosearch"></i>
        <i class="iconfont icon-shouye" v-else @click="gohome"></i>
      </div>
    </div>
  </div>
</template>


<script>
import { log } from "util";
export default {
  name: "zeroheader",
  data() {
    return {};
  },
  props: {
    zerotitle: {
      default: "Zero Music"
    }
  },
  methods: {
    //打开侧边栏
    controlSB() {
      if (this.$store.state.opensideBar == false) {
        let sbstate = true;
        this.$store.commit("openSideBar", sbstate);
      }
    },
    gosearch() {
      this.$router.push({
        name: "search",
        params: {}
      });
    },
    gohome(){
       this.$router.push({
        name: "music",
        params: {}
      });
    }
  },
  created() {
    // console.log("zerotitle", this.zerotitle == "");
  }
};
</script>


<style lang='scss'>
$zerocolor: #d43c33;
.zeroHeader {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 2;
  .head_bg {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      filter: blur(5px) brightness(0.6) opacity(0.8);
      z-index: -1;
    }
  }
  .header {
    display: flex;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    .left {
      width: 12%;
    }
    .mid {
      width: 76%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .right {
      width: 12%;
    }
    i {
      font-size: 20px;
    }
  }
}
</style>